<link rel="stylesheet" href="<?php echo base_url(); ?>public/admin/assets/css/colorbox.css" />
<style>
   .ace-thumbnails li img{
       width: 200px;
       height: 200px;
   }
</style>
<div class="page-content">
<div class="page-header position-relative">
<h1>
Gallery
<small>
    <i class="icon-double-angle-right"></i>
    responsive photo gallery using colorbox
</small>
</h1>
</div><!--/.page-header-->

<div class="row-fluid">
    <div class="span12">
        <!--PAGE CONTENT BEGINS-->

        <div class="row-fluid">
            <ul class="ace-thumbnails">

                <?php
                    foreach($data as $value){
                        if($value['Image'] != "" && $value['Image'] != null){
                            ?>
                            <li>
                                <a href="<?php echo $value['Image'];  ?>" data-rel="colorbox" class="cboxElement">
                                    <img alt="150x150" src="<?php echo $value['Image'];  ?>">
                                    <div class="text">
                                        <div class="inner"><?php echo $value['Title'];  ?></div>
                                    </div>
                                </a>

                                <div class="tools tools-bottom">
                                    <a href="<?php echo base_url()."detail?Id=".$value['Id']; ?>" target="_blank">
                                        <i class="icon-link"></i>
                                    </a>

                                    <a href="#">
                                        <i class="icon-paper-clip"></i>
                                    </a>

                                    <a href="#">
                                        <i class="icon-pencil"></i>
                                    </a>

                                    <a href="#">
                                        <i class="icon-remove red"></i>
                                    </a>
                                </div>
                            </li>
                            <?php
                        }
                    }
                ?>



            </ul>
        </div><!--PAGE CONTENT ENDS-->
    </div><!--/.span-->
</div><!--/.row-fluid-->
</div>

<script type="text/javascript">
    window.jQuery || document.write("<script src='<?php echo base_url(); ?>public/admin/assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
<!--<![endif]-->

<!--[if IE]>
<script type="text/javascript">
    window.jQuery || document.write("<script src='<?php echo base_url(); ?>public/admin/assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->

<script type="text/javascript">
    if("ontouchend" in document) document.write("<script src='<?php echo base_url(); ?>public/admin/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>

<script src="<?php echo base_url(); ?>public/admin/assets/js/jquery.colorbox-min.js"></script>

<script type="text/javascript">
    $(function() {
        var colorbox_params = {
            reposition:true,
            scalePhotos:true,
            scrolling:false,
            previous:'<i class="icon-arrow-left"></i>',
            next:'<i class="icon-arrow-right"></i>',
            close:'&times;',
            current:'{current} of {total}',
            maxWidth:'100%',
            maxHeight:'100%',
            onOpen:function(){
                document.body.style.overflow = 'hidden';
            },
            onClosed:function(){
                document.body.style.overflow = 'auto';
            },
            onComplete:function(){
                $.colorbox.resize();
            }
        };

        $('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
        $("#cboxLoadingGraphic").append("<i class='icon-spinner orange'></i>"); //let's add a custom loading icon

    });
</script>